<template>
  <div>
      <tops></tops>
      <!--  -->
        <ShopNav/>
        <!-- <Search/> -->
      <!-- 无商品 -->
      <div class="wShopCont1" v-show="bol">
          <div @click="goBack()" class="wShop-txt">
              <img  src="../../assets/imgs/goche.png" alt="购物车"/>
          </div>
          <div class="wShop-hxt">
              <span>你的购物车是空的</span>
              <span @click="wsGo()">去首页看看</span>
          </div>
      </div>
      <!-- 有商品 -->
      <div class="wShopyes" v-show="!bol">
          <!-- ==1 -->
          <div class="wsy-top w">
              <span><i></i>购物车</span>
          </div>
          <!-- ==2 -->
          <div class="wsy-drop">
              <div class="wsy-droplis">
                  <template v-for="(ins1,v1) in goods">
                      <div :key="v1" class="wsy-drop">
                        <div class="wsy-drop-top">
                            <span class="wsy-dian1"><i @click="wChan(v1,v2)" :class="{'dian1-con':!warrBol[v1].bg}"></i>{{ins1.ng}}</span>
                            <span class="wsy-dian2">{{ins1.ng1}}</span>
                            <span class="wsy-dian2">{{ins1.ng2}}</span>
                            <span class="wsy-dian2">{{ins1.ng3}}</span>
                            <span class="wsy-dian2">{{ins1.ng4}}</span>
                            <span class="wsy-dian2">{{ins1.ng5}}</span>
                        </div>
                        <div class="drop-list">
                            <template v-for="(ins2,v2) in ins1.list">
                                <div :key="v2" class="drop-listo">
                                    <div>
                                        <div class="drop-lis">
                                            <i @click="wChan1(v1,v2)" :class="{'list-icon':warrBol[v1].bg2[v2]}"></i>
                                            <div class="lisImg">
                                                <img src="../../assets/imgs/树莓.png" alt="图片">
                                            </div>
                                            {{ins2.ngs}}
                                        </div>
                                        <div class="drop-lis1">{{ins2.gu1}}</div>
                                        <div class="drop-lis1">￥{{ins2.gu2}}</div>
                                        <div class="drop-lis1 drop-move">
                                            <span>
                                                <i @click="wgo(v1,v2)"></i>
                                                <i>{{ins2.gu3}}</i>
                                                <i @click="wto(v1,v2)"></i>
                                            </span>
                                        </div>
                                        <div class="drop-lis1">￥{{ins2.gu5}}</div>
                                        <div class="drop-lis1" @click="delet(v1,v2)">{{ins2.gu4}}</div>
                                    </div>
                                </div>
                            </template>
                            <div class="drop-listo2">商品金额：<span>￥{{ins1.tot}}</span></div>
                        </div>
                      </div>
                  </template>
              </div>
          </div>
          <!-- ==3 -->
          <div class="wDel clearfix">
              <div class="wDtot">
                  <span @click="changAll()">全选</span>
                  <span @click="deletAll()">批量删除</span>
              </div>
              <div class="wDcont">
                  <div>
                      商品总计:<span>￥{{zong}}</span>
                  </div>
                  <div @click="wBuy1()">立即购买</div>
              </div>
          </div>
      </div>
      <foots></foots>
  </div>
</template>

<script>
import Top from '../Topnav';
import Foot from '../Foot';
import ShopNav from './com/ShopNav';
import Search from '../Topsearch';
import axios from 'axios';
export default {
    name:'Shop',
    data(){
        return{
            bol:true,
            zong:0,
            warrBol:[],
            warrGo:true,
            goods:this.$store.state.wly[0].goods1,
            flag:0,
            ni:'你哈',
             obj:[{
                headPic: "http://mobile.bwstudent.com/images/small/default/user.jpg",
                nickName: "王丽雅",
                phone: "13733336666",
                sessionId: "161059033246784332",
                sex: 1,
                userId: 84332,
            }
            ],
        }
    },
    components:{
        'foots':Foot,
        'tops':Top,
        ShopNav,
        Search
    },
    beforeMount(){
      this.$store.state.wly[0].ads=2;

        this.shoping();
        this.da();
        this.findShopping();//查询购物车
    },
    mounted(){
        this.$store.state.wly[0].ads=2;
        console.log(this.ni);
        this.arrtot();
    },
    methods:{
        // 查询购物车
        findShopping(){
            var obj={
                // orderInfo:{"commodityId":16,"amount":5},
                orderInfo:[
                    {"commodityId":16,"amount":5}
                    ],
                totalPrice:520.55,
                addressId:17099,
            }
            var da={
                "data":{"commodityId":16,"amount":5}
                };
                var obj1={
                    orderId:2018112211424963613

                }
            // var data=JSON.stringify(da);
            console.log(this.$store.state.obj[0].userId);
            axios({
                method:'get',
                url:'/api/small/order/verify/v1/findOrderListByStatus',//创建订单
                params:{
                    status:0,
                    page:1,
                    count:5
                },
                  headers:{
                    userId:this.obj[0].userId,
                    sessionId:this.obj[0].sessionId
                }
            }).then(res=>{
                console.log(res.data);

            });

        },

        // 提交订单
        wBuy1(){
            // this.$router.replace('/shoptwo');
            // var jsonArray=[{"commodityId":3,"amount":1}];
            var obj={
                orderInfo:{"commodityId":16,"amount":1},
                totalPrice:520.55,
                addressId:17098,
            }
            axios({
                method:'post',
                url:'/api/small/order/verify/v1/createOrder',
                params:obj,
                headers:{
                    userId:this.$store.state.obj[0].userId,
                    sessionId:this.$store.state.obj[0].sessionId
                }

            }).then(res=>{
                console.log(res.data);

            });
        },
        goBack(){
            this.$router.replace('/');
        },
        wSchang(v1){
            console.log(v1);
            this.ads=v1;
        },
        wsGo(){
            // console.log('去首页');
            this.$router.replace('/');
        },
        shoping(){
            if(this.goods==[]){
                this.bol=true;
            }else if(this.goods!=[]){
                this.bol=false;
            }
        },
        // 减
        wgo(v1,v2){
            // console.log(v1,v2,'减');
            this.goods[v1].list[v2].gu3--;
            if(this.goods[v1].list[v2].gu3<1){
                this.goods[v1].list[v2].gu3=1;
            }
            this.arrtot();
            this.bian(v1,v2);
        },
        // 加
        wto(v1,v2){
            // console.log(v1,v2,'加');
            console.log(this.goods[v1].list[v2].gu3);
            this.goods[v1].list[v2].gu3++;
            this.arrtot();
            this.bian(v1,v2);
        },
        da(){
            this.warrBol=[];
            for(var i=0;i<this.goods.length;i++){
                this.warrBol.push({'bg':false,'bg2':[]});
                for(var b=0;b<this.goods[i].list.length;b++){
                    this.warrBol[i].bg2.push(false);
                }
            }
        },
        // 单个店铺全选
        wChan(v1,v2){
            let monTot=0;
            this.warrBol[v1].bg=!this.warrBol[v1].bg;
            for(var i=0;i<this.warrBol[v1].bg2.length;i++){
                this.$set(this.warrBol[v1].bg2,i,this.warrBol[v1].bg);
            }
            this.bian(v1,v2);
            if(this.warrBol[v1].bg==false){
                this.goods[v1].tot=0;
            }
        },
        // 单个店铺单行总价
        arrtot(){
            for(var i=0 ;i<this.goods.length;i++){
                for(var b=0;b<this.goods[i].list.length;b++){
                    this.goods[i].list[b].gu5= this.goods[i].list[b].gu2*this.goods[i].list[b].gu3;
                }
            }
            console.log('ss');
        },
        // 单个店铺总价
        bian(v1,v2){
            let num=0;
            let money=0;
            let monTot=0;
            for(var i=0;i<this.warrBol[v1].bg2.length;i++){
                if(this.warrBol[v1].bg2[i]==true){
                    num++;
                    money += this.goods[v1].list[i].gu5;
                    this.goods[v1].tot=money;
                }
            }
             for(var b=0;b<this.goods.length;b++){
                monTot+=this.goods[b].tot;
                this.zong=monTot;
            }
            // console.log(monTot,'你');
        },
        // 全选
        wChan1(v1,v2){
            let num=0;
            this.$set(this.warrBol[v1].bg2,v2,!this.warrBol[v1].bg2[v2]);
            for(var i=0;i<this.warrBol[v1].bg2.length;i++){
                if(this.warrBol[v1].bg2[i]==true){
                    num++;
                    this.bian(v1,v2);
                }
            }
            // 一个店的全选
            if(num==this.warrBol[v1].bg2.length){
                this.warrBol[v1].bg=true;
                // console.log('全选');
            }else{
                this.warrBol[v1].bg=false;
                this.bian(v1,v2);
                // console.log('不全选');
                this.goods[v1].tot=0;
            }
            this.bian(v1,v2);
        },
        // 删除1
        delet(v1,v2){
            // 删除数据
            this.$delete(this.goods[v1].list,v2);
            // 删除选框
            this.$delete(this.warrBol[v1].bg2,v2);

            if(this.goods[v1].list.length<1){
                // 删除数据bol
                this.$delete(this.goods,v1);
                // 删除选框bol
                this.$delete(this.warrBol,v1);
                if(this.goods==0){
                this.bol=true;
                }else if(this.goods.length!=0){
                    this.bol=false;
                }
                console.log(this.goods.length);
            }
            this.arrtot();
            this.bian(v1,v2);

            
        },
        // 批量删除
        deletAll(){
            // 删除选中的
            var lis=this.warrBol;
            let num=0;
            for(var i=0;i<lis.length;i++){
                if(this.warrBol[i].bg==true){
                    this.$delete(this.goods,i);
                    this.$delete(this.warrBol,i);
                }else{
                    for(var b=0;b<lis[i].bg2.length;b++){
                        if(lis[i].bg2[b]==true){
                            this.$delete(this.goods[i].list,b);
                            this.$delete(this.warrBol[i].bg2,b);
                            if(this.goods[i].list.length<1){
                                // 删除数据bol
                                this.$delete(this.goods,i);
                                // 删除选框bol
                                this.$delete(this.warrBol,i);
                            }
                            // console.log(this.goods[i].list[i]);
                        }
                    }
                }
            }
            if(this.goods==0){
                this.bol=true;
            }else if(this.goods.length!=0){
                this.bol=false;
            }
            console.log(this.goods.length);
        },
        // 全选值的改变
        chanAll(bol){
            var lis=this.warrBol;
            for(var i=0;i<lis.length;i++){
                this.warrBol[i].bg=bol;
                for(var b=0;b<lis[i].bg2.length;b++){
                    this.$set(this.warrBol[i].bg2,b,bol);  
                }
            }
        },
        // 全选前的值变化
        num(bb){
            var lis=this.warrBol;
            let num=bb;
            for(var i=0;i<lis.length;i++){
                if(this.warrBol[i].bg==false){
                    num++;
                }
            }
            return num;
        },
        // 全选
        changAll(){
            this.num(0);
            let num=this.num(0);
            // console.log(num);
                if(num>=1){
                    this.chanAll(true);
                }else{
                    this.chanAll(false);
                }
        },
        // 总价
    }
}
</script>

<style scoped>
/* public */
.w{
    width: 1280px;
    margin: 0 auto;
}
.wb{
    width: 100%;
   border-bottom: 1px solid #ddd;
}
/* 有商品 */
/* ==3 */
.wDel{
    width: 1280px;
    max-width: 1280px;
    margin: 20px auto 35px;
}
.wDtot{
    line-height: 54px;
     color: #498e3d;
    font-size: 14px;
    padding-left: 20px;
    float: left;
    cursor: pointer;
}
.wDtot span:nth-of-type(1){
    padding-right: 44px;
}
.wDcont{
    float: right;
    font-size: 18px;
    color: #666;
    display: flex;
}
.wDcont div:nth-of-type(1) span{
    font-size: 24px;
    color: #ff5757;
    margin-right: 30px;
    line-height: 54px;
   
}
.wDcont div:nth-of-type(2) {
    margin-top: 1px;
    font-size: 20px;
    color: #fff;
    line-height: 50px;
    height: 50px;
    width: 150px;
    border-radius: 6px;
    background-color: #f08200;
   
}

/* ==1 */
.wShopyes{
    width: 100%;
}
.wsy-top{
    line-height: 58px;
    font-size: 18px;
    color: #666;
    text-align: left;
}
.wsy-top span i{
    display: inline-block;
    height: 20px;
    width: 22px;
    background: url(../../assets/imgs/goche1.png) no-repeat 0 0 ;
    margin-right: 15px;
    position: relative;
    top: 1px;
}
/* ==2 */
.wsy-drop{
    /* width: 100%; */
    width: 1278px;
    margin: 0 auto 20px;
    /* border: solid 1px #ddd; */
}
.wsy-drop-top{
    height: 46px;
    line-height: 46px;
    background-color: #f2f2f2;
    text-align: left;
    border-top: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
}
.wsy-drop-top .wsy-dian1{
    display: inline-block;
    width: 314px;
    padding-left: 56px;
    position: relative;
}
.wsy-dian1 i{
    position: absolute;
    top: calc(50% - 8px);
    left: 20px;
    height: 16px;
    width: 16px;
    background: url(../../assets/imgs/w-fdui.png) no-repeat 0 0;
}
.wsy-dian1 i.dian1-con{
    background: url(../../assets/imgs/w-fdui.png) no-repeat 0 -24px;
}
.wsy-drop-top .wsy-dian2{
    display: inline-block;
    width: 180px;
    text-align: center;
}
.wsy-drop-top .wsy-cao{
    display: inline-block;
    width: 90px;
}
.drop-list{
     width: 1278px;
     margin: 0 auto;
}
.drop-listo>div {
    display: flex;
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
}
.drop-listo .drop-lis{
    padding-left: 156px;
    width: 220px;
    position: relative;
    color: #666;
    font-size: 14px;
}
.drop-lis i{
    position: absolute;
    top: calc(50% - 8px);
    left: 20px;
    height: 16px;
    width: 16px;
    background: url(../../assets/imgs/w-fdui.png) no-repeat 0 -24px;
    /* background: url(../../assets/imgs/w-fdui.png) no-repeat 0 0; */
}
.drop-lis i.list-icon{
    background: url(../../assets/imgs/w-fdui.png) no-repeat 0 0;
}
.drop-lis div{
    position: absolute;
    top: calc(50% - 40px);
    left: 56px;
    height: 80px;
    width: 80px;
    border: 1px solid #dedede;
}
.lisImg img{
    width: 100%;
}
.drop-listo .drop-lis1{
    width: 180px;
}
.drop-move {
    font-size: 0;
}
.drop-move span{
    line-height: 26px;
    width: 100px;
    border: 1px solid #d3d3d3;
    display: flex;
    margin-top: 47px;
    margin-left: 40px;

}
.drop-move span i:nth-of-type(1){
    display: inline-block;
    width: 26px;
    line-height: 26px;
    background: url(../../assets/imgs/a2.png) no-repeat 5.5px 5.5px ;
}
.drop-move span i:nth-of-type(2){
    display: block;
    width: 46px;
    /* height: 26px; */
    line-height: 27px;
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
    /* background-color: #f0f; */

}
.drop-move span i:nth-of-type(3){
    display: inline-block;
    width: 26px;
    background: url(../../assets/imgs/a1.png) no-repeat 5.5px 5.5px;
}
.drop-listo div:nth-child(1){
    color: #666;
    font-size: 14px;
}.drop-listo div:nth-child(2){
    font-size: 14px;
    color: #999;
}.drop-listo div:nth-child(3){
    font-size: 14px;
    color: #999;
}.drop-listo div:nth-child(4){
    color: #666;
    font-size: 16px;
}.drop-listo div:nth-child(5){
    font-size: 14px;
    color: #333;
}
.drop-listo div:nth-child(6){
    font-size: 14px;
    color: #498e3d;
}
.drop-listo2{
    line-height: 80px;
    border-bottom: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    text-align: right;
    padding-right: 36px;
    font-size: 18px;
    color: #666;
}
.drop-listo2 span{
    color: #ff5757;
    font-size: 24px;
}

/*  无商品*/
.wShopCont1{
    width: 330px;
    height: 118px;
    margin: 170px auto;
    display: flex;
    
}
.wShop-txt{
    height: 110px;
    padding-top: 8px;
    width: 160px;
}

.wShop-hxt span{
    display: block;
    width: 170px;
}
.wShop-hxt span:nth-child(1){
    font-size: 20px;
    color: #666;
    line-height: 68px;
    margin-top: 4px;
}
.wShop-hxt span:nth-child(2){
    width: 170px;
    line-height: 45px;
    border-radius: 5px;
    background-color: #f08200;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}


.clearfix::after{
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix{
    *zoom: 1;
}
</style>